<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 13px;
        }
        #bg{
            background-color: rgba(16, 15, 15, 0.5);
            width: 99%;
            height: 99%;
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
            display: none;
        }
        #btnShow{
            z-index: 3;
        }
        #box{
            width: 260px;
            position: absolute;
            background-color: #fff;
            top: 50%;
            left: 50%;
            margin-left: -130px;
            margin-top: -75px;
            z-index: 2px;
            display: none;
            border: solid 1px #ccc;
            border-radius: 3px;
        }
        #box>.title{
            background-color: #008081;
            color: #fff;
            padding: 10px 20px;
        }
        #box>.con{
            overflow: hidden;
        }
        #box .con .img{
            float: left;
            margin: 10px 10px;
        }
        #box .con .rright{
            float: left;
            margin-bottom: 30px;
            margin-left: 20px;
            margin-top: 3px;
        }
        #box .con .rright .btn{
            text-align: center;
            margin: 0 auto;
        }
        #box .con .rright .btn>button{
            background-color: #008081;
            color: #fff;
            border: none;
            width: 63px;
        }

        #pic{
            width: 400px;
            margin: 0 auto;
            /* display: none; */
        }
        #pic input{
            margin-right: 100px;
        }

    </style>
</head>
<body>
    <div id="bg"></div>
    <div id="box">
        <div class="title">
            提示
        </div>
        <div class="con">
            <div class="img">
                <img width="50px" height="50px" src="../demo/img/sp.jpg" alt="">
            </div>
            <div class="rright">
                <p>你真的要切换图片吗？</p>
                <div class="btn">
                    <button>确定</button>
                </div>
            </div>
        </div>
    </div>


    <div id="pic">
        <div class="img">
            <img id="imgShow" width="400px" height="400px" src="../demo/img/boy.png" alt="404">
        </div>
        <fieldset>
            <legend>选择按钮</legend>
            <!-- name属性的值相同可以确保单选按钮组互相排斥选择 -->
            <input checked type="radio" name="pic" id="pic1">
            <input type="radio" name="pic" id="pic2">
            <input type="radio" name="pic" id="pic3">
        </fieldset>
    </div>
    <script>
        //获取单选按钮对象
        function getElement(id){
            return document.getElementById(id);
        }
        // var btnPic1 =  getElement("pic1");
        // var btnPic2 =  getElement("pic2");
        // var btnPic3 =  getElement("pic3");

        //绑定元素的单击事件
        var divBg = document.getElementById("bg");
        var divBox = document.getElementById("box");
        var yes = document.getElementsByClassName("btn")[0]

        function showPicInfo(id,value){
            divBg.style.display="block";
            divBox.style.display="block";
            yes.onclick = function(){
                divBg.style.display="none";
                divBox.style.display="none";
                imgShow.setAttribute("src",value);
            }
        }

        getElement("pic1").onclick = function(){
            //添加系统询问对话框 返回值：true/false
            // var yesno = confirm("你真的要切换图片吗？")  
            divBg.style.display="block";
            divBox.style.display="block";
            // if(yesno){
            //      // setAttribute 设置或重置指定属性名称的值
            //     imgShow.setAttribute("src","../demo/img/boy.png");
            // }
            yes.onclick = function(){
                divBg.style.display="none";
                divBox.style.display="none";
                imgShow.setAttribute("src","../demo/img/boy.png");
            }
            
        }
        getElement("pic2").onclick = function(){
            divBg.style.display="block";
            divBox.style.display="block";
            // setAttribute 设置或重置指定属性名称的值
            yes.onclick = function(){
                divBg.style.display="none";
                divBox.style.display="none";
                imgShow.setAttribute("src","../demo/img/R-C.jpg");
            }
        }
        getElement("pic3").onclick = function(){
            divBg.style.display="block";
            divBox.style.display="block";
            // setAttribute 设置或重置指定属性名称的值
            yes.onclick = function(){
                divBg.style.display="none";
                divBox.style.display="none";
                imgShow.setAttribute("src","../demo/img/sp.jpg");
            }        
        }
    </script>
</body>
</html>